<template>
    <button class="btn"  @click="deleteUserStu" title="删除学生用户"><el-icon><Delete/></el-icon></button>
    <el-dialog v-model="dialogVisible" :title="$t('teacher.IfDeleteTea')" width="30%" >
       <span>{{$t('teacher.DeleteTea')}}:{{ queryNickName() }}</span>
       <template #footer>
         <span class="dialog-footer">
           <el-button type="primary" @click="deleteUserStuBtn">
            {{$t('teacher.confirm')}}
           </el-button>
           <el-button type="primary" @click="dialogVisible = false">
            {{$t('teacher.cancel')}}  
           </el-button>      
         </span>
       </template>
     </el-dialog>
   </template>
   <script>
   import { Delete } from '@element-plus/icons-vue';
    export default {
       name: 'DELETE_USER_TABLE',
       props:["userList"],
       components:{
            Delete
    },
    data: function(){
       return {
           dialogVisible:false,
           formData:{
               phone:""
           }
       }
       },
       methods:{
            deleteUserStu(){
               this.$emit("getSelectData");
               this.dialogVisible = true;
               var that = this;
               this.formData.phone="";
               
           },  
           deleteUserStuBtn(){
              var that = this;
              this.userList.some(function(item,index){
               that.formData.phone += item.phone;
               if(index !== (that.userList.length -1)){
                   that.formData.phone +=","
               }
              });
   
               window.http.post('/api/user/deleteStu',this.formData).then(res => {
                //  console.info(JSON.stringify(res));
                  var data = res.data;
                  if(data.success){ 
                     that.$message.success(data.msg);
                     that.$emit("reback");
                     that.dialogVisible=false;
                  }else{
                     that.$message.error(data.msg);
                  } 
               })
               .catch(function(error){
                  that.$message.error('服务器异常');
               });
           },
           queryNickName(){
               var nickName="";
               var that = this;
               this.userList.some((item,index)=>{
                   if(item && item.nickName !== ""){
                        nickName +=item.nickName;
                       if(index !== that.userList.length - 1){
                            nickName +=",";
                       }
                   }
               });
               return nickName;
           }
       },
       mounted(){
        var that = this;
        this.$bus.on("deleteUserStuById",function(){
            that.dialogVisible = true;
            that.formData.phone ="";
        })
       },
       unmounted(){
        this.$bus.off("deleteUserStuById")
       }
        }
   </script>
       <style>
       html,
       body, 
       #app{
       height: 100%;
       }
       </style>
       <style scoped>
       .container {
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       width: 100%;
       height: 100%;
   
       }
       .tr{
       width: 200px;
       flex-basis: 50px;
       display: flex;
       flex-direction: row;
       justify-content: space-between;
       background-color: beige;
       align-items: center;
       }
       .second{
       background-color: aqua;
       }
       </style>